<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圣杯布局</title>
    <style>
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-width: 600px; /* 确保布局在小屏幕下不混乱 */
            font-family: Arial, sans-serif;
            line-height: 1.6;
        }

        /* 头部和底部样式 */
        header, footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 1rem;
        }

        /* 容器样式 */
        .container {
            padding: 0 200px; /* 为左右栏预留空间 */
            overflow: hidden; /* 清除浮动影响 */
        }

        /* 三栏共用样式 */
        .center, .left, .right {
            float: left;
            min-height: 400px; /* 最小高度，确保能看到布局效果 */
            padding: 20px;
        }

        /* 中间栏样式 */
        .center {
            width: 100%;
            background-color: #ffe6b3;
        }

        /* 左侧栏样式 */
        .left {
            width: 200px;
            background-color: #a0d8ef;
            margin-left: -100%; /* 移动到上一行左侧 */
            position: relative;
            left: -200px; /*调整到预留位置*/
        }

        /* 右侧栏样式 */
        .right {
            width: 200px;
            background-color: #c3a6c2;
            margin-left: -200px; /* 移动到上一行右侧 */
            position: relative;
            right: -200px; /* 调整到预留位置 */
        }

        /* 内容区域标题样式 */
        .column-title {
            text-align: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <header>
        <h1>页面头部</h1>
    </header>

    <div class="container">
        <!-- 中间栏放在最前面，优先加载 -->
        <div class="center">
            <h2 class="column-title">中间内容区</h2>
            <p>这是中间的主要内容区域，宽度会自适应变化。</p>
            <p>在圣杯布局中，中间栏的HTML结构放在最前面，确保优先加载。</p>
            <p>左右两侧是固定宽度的边栏，中间是自适应宽度的主内容区。</p>
        </div>

        <!-- 左侧栏 -->
        <div class="left">
            <h2 class="column-title">左侧边栏</h2>
            <p>这是左侧边栏，宽度固定为200px。</p>
        </div>

        <!-- 右侧栏 -->
        <div class="right">
            <h2 class="column-title">右侧边栏</h2>
            <p>这是右侧边栏，宽度固定为200px。</p>
        </div>
    </div>

    <footer>
        <h2>页面底部</h2>
    </footer>
</body>
</html>
